<template>
    <div class="person_fees">
        <x-header :left-options="{backText: ''}" >个人缴纳
          <a slot="right"  class="choose" @click="changChoose()"></a>
        </x-header>
        <group class="branchFees">
            <cell :title="item.username" v-for="(item,index) of branchHelps" :key="index">
                <img slot="icon" src="./dangyuan.png" alt="" class="weui-cell_icon">
                <p>已交<span>{{item.sum}}</span>元</p>
            </cell>
        </group>
        <div v-transfer-dom>
          <popup v-model="isShow" position="right" @on-hide="hidePopup()">
            <div class="chooseBox">
              <div class="box_title">条件筛选</div>
              <div class="box_classify">
                <!-- <div class="box_time">
                  <div class="classify_name">走访时间</div>
                  <div class="classify_date">
                    <checker v-model="selectedDate" default-item-class="normal_date" selected-item-class="selected_date">
                      <checker-item :value="item" v-for="(item, index) in dateClass" :key="index">{{item.value}}</checker-item>
                    </checker>
                    <group>
                      <datetime v-model="startDate" title="开始日期" clear-text="今天" @on-clear="setToday"></datetime>
                    </group>
                    <group class="endDate">
                      <datetime v-model="endDate" title="结束日期"></datetime>
                    </group>
                  </div>
                </div> -->
                <div class="box_name">
                 <!-- <div class="classify_name">党员名称</div>-->
                  <div class="classify_search">
                    <group>
                      <selector v-model="selectedData" :value-map="['card_no', 'username']" :options="ajaxData" placeholder="全部党员"></selector>
                    </group>
                    <!-- <model-list-select :list="ajaxData"
                             option-value="card_no"
                             option-text="username"
                             v-model="selectedData"
                             placeholder="全部"
                             @searchchange="searchData">
                    </model-list-select> -->
                  </div>
                </div>
              </div>
              <div class="box_button">
                <x-button type="primary" @click.native="choosedData">确定</x-button>
              </div>
            </div>
          </popup>
        </div>
    </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell,
  TransferDom,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  Selector,
  XButton
} from "vux";
import { mapGetters } from "vuex";
// import { ModelListSelect } from "vue-search-select";
export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    Selector,
    // ModelListSelect,
    XButton
  },
  data() {
    return {
      branchHelps: [],
      isShow: false,
      // selectedDate: { key: 1, value: "本月" },
      // dateClass: [
      //   {
      //     key: 1,
      //     value: "本月"
      //   },
      //   {
      //     key: 2,
      //     value: "本季度"
      //   },
      //   {
      //     key: 3,
      //     value: "本年"
      //   }
      // ],
      // startDate: "",
      // endDate: "",
      ajaxData: [],
      selectedData: "",
      searchText: ""
    };
  },
  computed: {
    ...mapGetters(["feesPerson", "feesPersonSelect"])
  },
  created() {
    // this.$store.dispatch("getFeesPerson", {
    //   department_id: this.$route.params.branchid
    // });
  },
  activated() {
    let time = window.sessionStorage.getItem("fee_time");
    let start = window.sessionStorage.getItem("fee_start");
    let end = window.sessionStorage.getItem("fee_end");
    this.$store.dispatch("getFeesPerson", {
      department_id: this.$route.params.branchid,
      time: time,
      start: start,
      end: end
    });
  },
  watch: {
    startDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    endDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    selectedDate: function(val) {
      if (Object.keys(val).length) {
        this.startDate = "";
        this.endDate = "";
      }
    },
    feesPerson: function(val) {
      this.branchHelps = val;
      this.ajaxData = val;
    },
    feesPersonSelect(val) {
      this.branchHelps = val;
    }
  },
  methods: {
    changChoose() {
      this.isShow = true;
    },
    hidePopup() {
      this.isShow = false;
    },
    setToday(value) {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.startDate = now.getFullYear() + "-" + cmonth + "-" + day;
    },
    searchData() {
      this.searchText = searchText;
    },
    choosedData() {
      // if (!this.selectedDate && !this.startDate && !this.endDate) {
      //   this.$vux.toast.text("请选择时间", "middle");
      // } else if (this.startDate && !this.endDate) {
      //   this.$vux.toast.text("请选择结束时间", "middle");
      // } else if (!this.startDate && this.endDate) {
      //   this.$vux.toast.text("请选择开始时间", "middle");
      // } else {
      let time = window.sessionStorage.getItem("fee_time");
      let start = window.sessionStorage.getItem("fee_start");
      let end = window.sessionStorage.getItem("fee_end");
      this.isShow = false;

      this.$store.dispatch("getFeesPersonSelect", {
        time: time,
        start: start,
        end: end,
        department_id: this.$route.params.branchid,
        card_no: this.selectedData
      });
      // this.selectedDate = { key: 1, value: "本月" };
      // this.startDate = "";
      // this.endDate = "";
      // this.selectedData = "";
      // }
    }
  }
};
</script>

<style lang="less">
.person_fees {
  font-size: 0;
  min-height: 100%;
  background: rgb(245, 245, 249);
  .choose {
    width: 1.375rem;
    height: 1.375rem;
    background: url("./shaixuan.png") no-repeat;
    background-size: 1.375rem 1.375rem;
  }
  .branchFees {
    padding: 2.875rem 0 0;
    .weui-cells {
      margin-top: 0.5rem;
    }
    .weui-cell {
      padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
    }
    .vux-cell-primary {
      text-align: left;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .weui-cell__ft {
      font-size: 0.6875rem;
      color: rgb(214, 60, 50);
      padding-right: 1rem;
      span {
        font-size: 1rem;
      }
    }
    .weui-cell_icon {
      display: block;
      width: 1.6875rem;
      margin-right: 0.375rem;
    }
  }
}
</style>
